<template>
	<view class="">
		
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
				<view class="qiun-title-dot-light">仪表盘</view>
			</view>
			<view class="qiun-charts" >
				<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
			</view>
		</view>
		
		<view class="welfare">
			<view class="item" @click="goToPage('/pages/wallet/payQr/payQr')">
				<view class="border">
					<text class="yticon img icon-shouye"></text>
				</view>
				<text class="txt">支付</text>
			</view>
			<view class="item" @click="goToPage('/pages/wallet/fire-drill/fire-drill')">
				<view class="border">
					<text class="yticon img icon-shouye"></text>
				</view>
				<text class="txt">火钻</text>
			</view>
			<view class="item" @click="goToPage('/pages/wallet/force/force')">
				<view class="border">
					<text class="yticon img icon-shouye"></text>
				</view>
				<text class="txt">原力值</text>
			</view>
			<view class="item" @click="goToPage('/pages/wallet/transaction/transaction')">
				<view class="border">
					<text class="yticon img icon-shouye"></text>
				</view>
				<text class="txt">兑换</text>
			</view>
		</view>
		
		<view class="qiun-columns">
			
			<view class="qiun-charts" >
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
		</view>
			
		<div class="ui-table">
			<view class="cu-list menu-avatar" :class="menuArrow?'arrow':''">
				<view class="cu-item">
					<view class="content">
						<navigator hover-class="none" url="../task/detail">
						<view class="text-grey">团队任务</view>
						</navigator>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								2020-04-20
							</view> </view>
					</view>
					<view class="action">
						<view class="text-red text-xs">+0.02</view>
					</view>
				</view>
				
				<view class="cu-item">
					<view class="content">
						<navigator hover-class="none" url="../task/detail">
						<view class="text-grey">平台分红</view>
						</navigator>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								2020-04-20
							</view> </view>
					</view>
					<view class="action">
						<view class="text-red text-xs">+0.02</view>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvaLineA =null;
	var canvaGauge = null;	
	var chartData = {
		categories: ['05.20', '05.21', '05.22', '05.23', '05.24', '05.25'],
		series: [{
			name: '火源价格走势',
			data: [35, 20, 100, 37, 4, 200],
			color: '#f926ae'
		}]
	}
	
	var gaugeData = {
		categories: [{
			value: 0.2,
			color: '#2fc25b'
		}, {
			value: 0.8,
			color: '#f04864'
		}, {
			value: 1,
			color: '#1890ff'
		}],
		series: [{
			name: '持有量122',
			data: 0.85
		}]
	}
	export default {
		data() {
			return {
				title: 'Hello',
				screenWidth:0,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				gaugeWidth:15
			}
		},
		onLoad() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync()
			this.screenWidth = windowWidth;
			console.log(this.screenWidth)
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		onReady() {
			
		},
		methods: {
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			
			getServerData(){
				let LineA={categories:[],series:[]};
				LineA.categories= chartData.categories;
				LineA.series= chartData.series;
				_self.showLineA("canvasLineA",LineA);
				
				//仪表盘
				let Gauge={categories:[],series:[]};
				Gauge.categories=gaugeData.categories;
				Gauge.series=gaugeData.series;
				_self.showGauge("canvasGauge",Gauge);
			},
			showLineA(canvasId,chartData){
					canvaLineA = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show:true},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)+'元'}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			showGauge(canvasId,chartData){
				canvaGauge = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'gauge',
					fontSize:11,
					legend:false,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',
						color: chartData.categories[1].color,
						fontSize: 25*_self.pixelRatio,
						offsetY:50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15*_self.pixelRatio,
						offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge:{
							type:'default',
							width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
							startAngle:0.75,
							endAngle:0.25,
							startNumber:0,
							endNumber:100,
							splitLine:{
								fixRadius:0,
								splitNumber:10,
								width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
								color:'#FFFFFF',
								childNumber:5,
								childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
							},
							pointer:{
								width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
								color:'auto'
							}
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
				});
			},
			getAccountInfo(){
				uni.request({
				    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
				    data: {
				        name: 'name',
				        age: 18
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: function (res) {
				        console.log(res.data);
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	
	@import '../../static/css/font_me.css';
	
	.cu-list.menu-avatar>.cu-item .content {
	    left: 20px !important;
	}
	
	*{
		margin: 0;
		padding: 0;
		font-family: "微软雅黑";
	}
	header{
		/* 头部包含背景图 */
		background-color: #ffda19;
		width: 100%;
		overflow: hidden;
		
		height: 120px;
	}
	header>p{
		/* 放我的和关机图标 */
		height: 50px;
		line-height: 50px;
	}
	header>p>span:nth-of-type(1){
		display: inline-block;
		float: left;
		padding-left: 16px;
		font-size: 18px;
		font-weight: bold;
	}
	header>p>span:nth-of-type(2){
		display: inline-block;
		float: right;
		padding-right: 16px;
	}
	header>p>span:nth-of-type(2)>i{
		font-size: 18px;
		font-weight: bold;
	}
	
	
	.info{
		/* 存放个人信息的 */
		width: calc( 100% - 32px );
		background-color: #FFFFFF;
		margin-left: 16px;
		height: 120px;
		margin-top: -48px;
		float: left;
		border-radius: 8px;
		box-shadow: 0 0 6px rgba(255,218,25,0.6);
	}
	.info>img{
		width: 66px;
		height: 66px;
		border-radius: 66px;
		margin: 0 auto;
		display: block;
		margin-top: -33px;
		border: 1px solid #ffda19;
	}
	.info_name{
		text-align: center;
		font-size: 16px;
		color: #444444;
		height: 30px;
		line-height: 30px;
	}
	.info_text{
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #6F6F6F;
	}
	.info_item{
		width: calc( 100% / 2 );
		float: left;
		text-align: center;
		padding: 4px 0;
	}
	.info_item>p:nth-of-type(1){
		font-size: 12px;
	}
	.info_item>p:nth-of-type(2){
		font-size: 14px;
		color: #6F6F6F;
	}
	.info_item:nth-of-type(1){
		border-radius: 0 0 0 8px;
	}
	.info_item:nth-last-of-type(1){
		border-radius: 0 0 8px 0;
	}
	
	.iconCon{
		/* 放功能的图标 */
		width: 100%;
		float: left;
		overflow: hidden;
		margin-top: 6px;
		padding: 12px 0;
	}
	.iconCon>div{
		float: left;
		width: calc( 100% / 4 );
		text-align: center;
		
	}
	
	.icon_comment{
		border-radius: 100px;
		font-size: 20px;
		width: 30px;
		height: 30px;
		display: inline-block;
		line-height: 30px;
		color: #FFFFFF;
	}
	
	.icon-xiezuo{
		background-color: #fbdc58;
	}
	.icon-tupian{
		background-color: #94ede2;
	}
	.icon-yinyue{
		background-color: #bceccd;
	}
	.icon-shipin{
		background-color: #ffbadc;
	}
	.welfare {
		margin: 0 auto;
		width: 92%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 21px 0px rgba(103, 103, 103, 0.2);
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 0px 30px;
		.item {
			padding: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	
			.border {
				margin-top: 5px;
				border: 2px solid #f06c7a;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.txt {
				margin-top: 5px;
				font-size: 10px;
				font-weight: 300;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
	.ui-table-cell span{
		font-size: 14px;
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
		.qiun-charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
		.charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
</style>